<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="退货退款" ref="navbar"></fa-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm">
				<u-form-item label="套餐名称" label-width="140">
					<u-input v-model="archives_name" disabled="disabled" />
				</u-form-item>
				<u-form-item label="套餐金额" label-width="140">
					<u-input v-model="archives_price" disabled="disabled" />
				</u-form-item>
				<u-form-item label="退款金额" label-width="140">
					<u-input v-model="form.price" />
				</u-form-item>
				<u-form-item label="退回商品" label-width="140"></u-form-item>
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.goods_id"
						style="margin-right: 10px;">
						<view style="border-bottom: 1px solid #eee;margin-top: 10px;">
							<image :src="item.image" mode="" style="width: 100px;height: 100px;margin-left: 15px;">
							</image>
							<view class=""
								style="text-align: center;width: 130px;height: 32px;line-height: 32px;font-size: 14px;">
								{{item.goods_name}}
							</view>
							<view class=""
								style="text-align: center;width: 130px;height: 36px;line-height: 36px;font-size: 14px;">
								<span style="float: left;margin-right: 10px;">数量:</span><u-input v-model="item.gg_id"
									type="number" placeholder="请填写数量" @input='inputV(item)' />
							</view>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</u-form>
			<u-button @click="submit" :custom-style="customStyle" style="margin-bottom: 20px;">确认</u-button>
		</view>
		<u-toast ref="uToast" />
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		archives
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		onLoad(e) {
			let query = e || {};
			this.user_id = query.user_id || 0;
			this.archives_id = query.archives_id || 0;
			this.archives_name = query.archives_name || 0;
			this.archives_price = query.archives_price || 0;
			this.is_update = true;
			// this.getArchives();
			this.getListGoods();
		},
		data() {
			return {
				user_id: 0,
				archives_id: 0,
				archives_name: 0,
				archives_price: 0,
				customStyle: {
					marginTop: '50px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333',
					border: 'none',
					background: '#e0ebdd',
				},
				list: [],
				form: {
					price: '',
					goods_num: [],
					goods_ids: [],
				},
				rules: {
					name: [{
						required: true,
						message: '请输入套餐名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			inputV(item) {
				console.log(item, 'item')

				// this.form.goods_num = parseInt(item.gg_id)
			},
			getListGoods: async function() {
				let data = {
					id: this.archives_id
				};
				let res = await this.$api.myTcGList(data);
				console.log(res, 'res')
				if (res.data.length) {
					this.list = this.list.concat(res.data);
				}
			},
			checkboxGroupChange(e) {
				console.log(e);
				this.form.goods_ids = e;
			},
			submit() {
				let goods = this.list;
				let jsonStr = '';
				if (!this.form.price) {
					uni.showToast({
						title: '请填写金额',
						icon: 'error',
						duration: 2000
					});
					return false;
				}

				for (let i = 0; i < goods.length; i++) {

					jsonStr += goods[i]['goods_id'] + ':' + goods[i]['gg_id'];
					if (i !== goods.length - 1) {
						jsonStr += ',';
					}

				}

				// if(!jsonStr){
				// 	uni.showToast({
				// 		title: '请填写数量',
				// 		icon: 'error',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				this.$api.addTcThtk({
					user_id: this.user_id,
					archives_id: this.archives_id,
					price: this.form.price,
					goods_num: jsonStr,
					goods_ids: this.form.goods_ids
				}).then(res => {
					console.log(res, '111')
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000,
							success: function(res1) {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/my/user_list'
									});
								}, 2000);
							},
						});

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});

					}

				});

			},

			getArchives: async function() {
				let data = {};

				let res = await this.$api.myTcGoodsList(data);
				console.log(res, 'res')
				if (res.data.length) {
					this.list = this.list.concat(res.data);

				}

			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				// var str = e.toString();
				this.form.goods_ids = e;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 90%;
		margin: 10px auto;
		padding-bottom: 50px;
	}

	.u-checkbox {
		border-bottom: 1px solid #eee;
		padding: 12px 0;
	}
</style>